<ul class="list-unstyled">
   {% for tmp in chirping_comments %}
   <li>
      <div class='item media'>
         <div class="media-body">
            <h4 class='timestamp' id='{{tmp.timestamp}}'>
               <small><i></i></small>
            </h4>
            {% include 'chirping-comment-menu.html' %}
            <div id="text_{{tmp.timestamp}}" class="text collapse in">
               <div class='panel-body'>
                  {{ tmp.text }}
               </div>
            </div>
            <input id='{{tmp.id}}' type='text' hidden value='{{tmp.score}}'/>
         </div>
      </div>
   </li>
   {% endfor %}
</ul>
{% include 'chirping-comment-pagination.html' %}

<script>
function thumb_comment(id, argv){
   pk = id
   input_score = $('input[type=text][id=' + pk + ']');
   score = new Number(input_score.val());
   score += argv;
   $.ajax({
      type: "POST",
      url: "/chirping/comment/score",
      data: "pk=" + pk + "&score=" + score,
      success: function (result) {
         input_score.val(score)
      },
      error : function() {
      }
   });
}

function thumb_up_comment(id){
   thumb_comment(id, 1)
}
function thumb_down_comment(id){
   thumb_comment(id, -1)
}
   function fetch_comments(offset){
      chirping_timestamp = $('h4.timestamp').attr('id')
      $.ajax({
         type: "GET",
         url: "/chirping/comments/html?chirping_timestamp=" + chirping_timestamp + "&offset=" + offset,
         success: function (result, status) {
            $('div.chirping_comments').html(result);
            setTimeout(render_timestamp, 0);
         },
         error : function() {
         }
      });
   }
function delete_comment(id){
   $.ajax({
      type: "DELETE",
      url: "/chirping/comment/delete",
      data: "pk=" + id,
      success: function (result) {
         fetch_comments({{comments_offset}})
      },
      error : function() {
      }
   });
}
</script>
